<template>
    <div>
        <div style="box-shadow:#ccc 0px 0px 10px;width: 100%;height:100%;background-color: white">
            <div style="width: 98%;height: 630px;margin-left: 10px">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="部门架构管理" name="first">
                        <el-row>
                            <el-col :span="10">
                                <div style="height: 540px;border-right: 2px solid #E4E7ED">
                                    <span>部门管理</span>
                                    <el-input placeholder="部门名称" v-model="depnameinput" style="margin-left: 20px;width: 230px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" ></i>
                                    </el-input>
                                    <el-tree style="margin-top: 20px"
                                            :data="mydepdata" default-expand-all :filter-node-method="filterNode" ref="deptree"
                                            :expand-on-click-node="false"
                                    >
                                     <span class="custom-tree-node"  slot-scope="s">
                                        <span>{{ s.data.label }}</span>
                                         <el-popover
                                                 placement="left-start"
                                                 width="100"
                                                 trigger="hover">
                                             <div>
                                                <div style="width: 130px;height: 110px;">
                                                    <ul class="myul">
                                                        <li @click="adddet(s.data)">
                                                            新建下级部门
                                                        </li>
                                                        <li @click="detdep(s.data.value)">
                                                            删除部门
                                                        </li>
                                                        <li @click="mydepaccredit(s.data.value)" v-show="s.data.isshow">
                                                            部门授权
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <el-button slot="reference" type="text" size="mini">设置</el-button>
                                         </el-popover>
                                    </span>
                                    </el-tree>
                                </div>
                            </el-col>
                            <el-col :span="14">
                                <div style="margin-left: 20px;height: 540px">
                                    <span>岗位管理</span>
                                    <el-input placeholder="岗位名称" v-model="rolenameinput" style="margin-left: 20px;width: 230px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" ></i>
                                    </el-input>
                                    <el-tree v-if="roleflag" style="margin-top: 20px"
                                            :data="myroledata" default-expand-all :filter-node-method="filterNode" ref="roletree"
                                            :expand-on-click-node="false"
                                    >
                                     <span class="custom-tree-node"  slot-scope="s">
                                        <span>{{ s.data.label }}</span>
                                         <el-popover
                                                 placement="left-start"
                                                 width="100"
                                                 trigger="hover">
                                             <div>
                                                <div style="width: 130px;height: 110px;">
                                                    <ul class="myul">
                                                        <li @click="addrole(s.data)">
                                                            新建下级岗位
                                                        </li>
                                                        <li @click="detrole(s.data.value)">
                                                            删除岗位
                                                        </li>
                                                        <li @click="setstation( s.data.value)">
                                                            岗位授权
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <el-button slot="reference" type="text" size="mini">设置</el-button>
                                         </el-popover>
                                    </span>
                                    </el-tree>
                                </div>

                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="用户管理" name="second">
                        <el-row>
                            <el-col :span="7">
                                <div style="height: 540px;border-right: 2px solid #E4E7ED">
                                    <span>岗位结构</span>
                                    <el-input placeholder="岗位名称" v-model="myrolenameinput" style="margin-left: 20px;width: 230px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" ></i>
                                    </el-input>
                                    <el-tree v-if="roleflag" style="margin-top: 20px"
                                             @node-click="myrolechangetime"
                                             :data="myroledata" default-expand-all :filter-node-method="filterNode" ref="myroletree"
                                             :expand-on-click-node="false"
                                    >
                                     <span class="custom-tree-node"  slot-scope="s">
                                        <span>{{ s.data.label }}</span>
                                    </span>
                                    </el-tree>
                                </div>
                            </el-col>
                            <el-col :span="17">
                                <div style="height: 540px">
                                    <el-row>
                                        <el-col :span="13">
                                            <span style="margin-left: 20px">{{myrolename}}</span>
                                            <el-input placeholder="员工名称/岗位名称" @blur="selectAllEmp" v-model="myempnameinput" style="margin-left: 20px;width: 230px;">
                                                <i slot="suffix" @click="selectAllEmp()" class="el-input__icon el-icon-search" ></i>
                                            </el-input>
                                        </el-col>
                                        <el-col :span="11">
                                            <el-checkbox @change="selectAllEmp" v-model="myempstatu">含离职</el-checkbox>
                                            <el-checkbox @change="selectAllEmp" v-model="myempservice">不含停用</el-checkbox>
                                            <el-button style="margin-left: 20px" size="small" type="primary" @click="addempshowview">新建员工</el-button>
                                            <el-button size="small" type="primary" @click="selectmyAllEmp">查询所有</el-button>
                                        </el-col>
                                    </el-row>
                                    <el-table
                                            height="440"
                                        :data="emptabledata.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                                        style="width: 96%;margin: 0 auto;margin-top: 20px">
                                    <el-table-column
                                            align="center"
                                            prop="empName"
                                            label="员工姓名">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="depId.depName"
                                            label="部门">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="roleId.roleName"
                                            label="岗位">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            label="入职日期">
                                        <template slot-scope="s">
                                            {{s.row.empSettime | formatDate}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="empService"
                                            label="启用状态">
                                    </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="empStatu"
                                                label="在职状态">
                                        </el-table-column>
                                    <el-table-column
                                            align="center"
                                            label="操作">
                                        <template slot-scope="d">
                                        <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                        <el-tooltip class="item" effect="dark" content="修改员工" placement="bottom">
                                            <i @click="editemp(d.row)" style="font-size:18px;color: #409EFF" class="el-icon-edit"></i>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="转部门" placement="bottom">
                                            <i @click="editempdept(d.row)" style="font-size:18px;padding-left: 10px;color: #409EFF" class="el-icon-s-custom"></i>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="删除员工" placement="bottom">
                                            <i style="font-size:18px;padding-left: 10px;color: #409EFF" class="el-icon-delete"></i>
                                        </el-tooltip>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                    <!--分页框-->
                                    <div style="margin-top: 10px;background-color: white">
                                        <div style="text-align: center">
                                            <el-pagination
                                                    @size-change="handleSizeChange"
                                                    @current-change="handleCurrentChange"
                                                    :current-page="pageNum"
                                                    :page-sizes="[5,8, 10, 20, 40]"
                                                    :page-size="pageSize"
                                                    layout="total, sizes, prev, pager, next, jumper"
                                                    :total="emptabledata.length"
                                            >
                                            </el-pagination>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!--新建部门-->
        <el-dialog width="650px" center :close-on-click-modal=false style="text-align: left" title="编辑部门" :visible.sync="adddetshow">
            <div style="height:330px;" class="scrollbar">
                <el-scrollbar style="height:100%">
                    <el-form :model="mydepfrom">
                        <el-form-item
                                label="上级部门">
                            <el-select v-model="mydepfrom.upDep" value-key="depId" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in depoptions"
                                        :key="item.depId"
                                        :label="item.depName"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="部门名称">
                            <el-input style="width: 215px" v-model="mydepfrom.depName"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="部门描述">
                            <el-input type="textarea" placeholder="添加部门描述" id="log-text10"
                                      style="resize:none;width: 420px"
                                      cols="24" rows="2" v-model="mydepfrom.depRemark"></el-input>
                        </el-form-item>
                        <el-button @click="savemydep()" style="margin-left: 230px;margin-top: 20px" size="small" type="primary" plain>保存</el-button>
                        <el-button style="margin-left: 10px;margin-top: 20px" size="small" type="primary" plain>返回</el-button>

                    </el-form>
                </el-scrollbar>
            </div>
        </el-dialog>

        <!--新建岗位-->
        <el-dialog width="650px" center :close-on-click-modal=false style="text-align: left" title="编辑岗位" :visible.sync="addrolesshow">
            <div style="height:330px;" class="scrollbar">
                <el-scrollbar style="height:100%">
                    <el-form :model="myrolefrom">
                        <el-form-item
                                label="上级岗位">
                            <el-select v-model="myrolefrom.roleUpid" value-key="depId" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in rolesoptions"
                                        :key="item.roleId"
                                        :label="item.roleName"
                                        :value="item.roleId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="所在部门">
                            <el-select v-model="myrolefrom.depId" value-key="depId" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in depIdsoptions"
                                        :key="item.depId"
                                        :label="item.depName"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="岗位名称">
                            <el-input style="width: 215px" v-model="myrolefrom.roleName"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="岗位描述">
                            <el-input type="textarea" placeholder="添加岗位描述" id="log-text11"
                                      style="resize:none;width: 420px"
                                      cols="24" rows="2" v-model="myrolefrom.roleRemark"></el-input>
                        </el-form-item>
                        <el-button @click="savemynewroles()" style="margin-left: 230px;margin-top: 20px" size="small" type="primary" plain>保存</el-button>
                        <el-button style="margin-left: 10px;margin-top: 20px" size="small" type="primary" plain>返回</el-button>

                    </el-form>
                </el-scrollbar>
            </div>
        </el-dialog>

        <!--部门授权-->
        <el-dialog
                title="部门权限" :visible.sync="deptJurisdiction">
            <el-transfer :titles="['未选权限','已选权限']" v-model="checkedGroup" :data="JurisdictionGroup"
                         :props="{key: 'menusId',label: 'menusName'}" style="margin-left: 24px;"></el-transfer>
            <span slot="footer" class="dialog-footer">
              <el-button @click="deptJurisdiction = false">取 消</el-button>
              <el-button type="primary" @click="saveDeptPer">确 定</el-button>
        </span>
        </el-dialog>
        <!--岗位授权-->
        <el-dialog :before-close="roleshandleDialogClose"
                title="岗位权限" :visible.sync="stationJurisdiction">
            <el-row style="margin-top: -20px">
                <el-col :span="4">
                    <el-checkbox v-model="allselect" @change="allselectmethed()" style="margin-top: 8px">
                        全部选择
                    </el-checkbox>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="myliro" value-key="liId"
                               style="width: 130px;height:20px;font-size:12px" placeholder="">
                        <el-option
                                v-for="item in listroles"
                                :key="item.liId"
                                :label="item.liName"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>

            <el-tabs v-model="myactiveName" style="margin-top: 20px" type="card" @tab-click="handleClick">
                <el-tab-pane :label="item.menusName" :name="item.menusName" v-for="(item) in myselectallroles" :key="item.menusId">
                    <el-scrollbar style="height:350px;">
                        <div style="margin-top: 20px" v-for="(roles) in item.wlist" :key="roles.wid">
                            <el-checkbox :checked="myval(mycheckedarr,roles.wname,roles.wid)"
                                         :label="roles"
                                         :key="roles.wid"
                                         v-model="myercheckedarr"
                                         @change="myerchangerole(roles)"
                                        >
                                <span>{{roles.wname}}</span>
                            </el-checkbox>
                            <el-row style="margin-top: 20px">
                                <el-checkbox-group v-model="mycheckedarr">
                                <el-col :span="4" v-for="(myrole) in roles.tlist" :key="myrole.tid" style="line-height: 50px;margin-left: 100px">
                                    <el-checkbox :checked="myval(mycheckedarr,myrole.tname,myrole.tid)"
                                                 :label="myrole"
                                                 :key="myrole.tid"
                                                 @change="mychangerole(roles)"
                                                 >
                                        <span>{{myrole.tname}}</span>
                                    </el-checkbox>
                                </el-col>
                                </el-checkbox-group>
                            </el-row>
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
              <el-button @click="roleshandleDialogClose()">取 消</el-button>
              <el-button type="primary" @click="savemyroles"
                         v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
            </span>
        </el-dialog>

        <!--新建员工-->
        <el-dialog :before-close="emphandleDialogClose" width="650px" center :close-on-click-modal=false style="text-align: left" title="编辑员工" :visible.sync="addempshow">
            <div style="height:560px;" class="scrollbar">
                <el-scrollbar style="height:100%">
                    <el-form :model="empfrom"
                             ref="empfrom" :rules="emprules" label-width="100px">
                        <el-form-item prop="empId">
                            <el-input style="width:250px;display: none" v-model="empfrom.empId"></el-input>
                        </el-form-item>
                        <el-form-item prop="empName"
                                label="员工姓名">
                            <el-input style="width:250px"  v-model="empfrom.empName"></el-input>
                        </el-form-item>
                        <el-form-item prop="depId" v-if="empfrom.empId==0"
                                label="所在部门">
                            <el-cascader style="width:250px"
                                    :props="defaultParams"
                                    @change="myempdepchange"
                                    v-model="depvalues"
                                    :options="myempdepoptions"></el-cascader>
                        </el-form-item>
                        <el-form-item prop="roleId" v-if="empfrom.empId==0"
                                label="所在岗位">
                            <el-select style="width:250px"
                                        v-model="empfrom.roleId" value-key="roleId" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in rolearrsoptions"
                                        :key="item.roleId"
                                        :label="item.roleName"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="empService"
                                label="是否启用">
                            <el-switch @change="mychangeservice"
                                v-model="myservice"
                                active-text="启用"
                                inactive-text="停用">
                            </el-switch>
                        </el-form-item>

                        <el-form-item prop="empGender"
                                label="员工性别">
                            <el-radio v-model="empfrom.empGender" label="男">男</el-radio>
                            <el-radio v-model="empfrom.empGender" label="女">女</el-radio>
                        </el-form-item>
                        <el-form-item prop="empPhone"
                                label="手机号码">
                            <el-input style="width:250px" v-model="empfrom.empPhone"></el-input>
                        </el-form-item>
                        <el-form-item prop="empSfz"
                                label="身份证">
                            <el-input style="width:250px" v-model="empfrom.empSfz"></el-input>
                        </el-form-item>

                        <el-form-item prop="empAdd"
                            label="所住地址">
                            <!--el-cascader级联（城市选择器）-->
                            <el-cascader v-model="address" :options="options" ref="cascaderAddr" clearable
                                         style="width: 250px;" filterable @change="handleChange" placeholder="选择地址">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item prop="empDeadd"
                                label="详细地址">
                            <el-input type="textarea" placeholder="添加详情地址" id="log-text14"
                                      style="resize:none;width: 420px"
                                      cols="24" rows="2" v-model="empfrom.empDeadd"></el-input>
                        </el-form-item>
                        <el-button @click="savemynewemp('empfrom')" style="margin-left: 230px;" size="small" type="primary" plain>保存</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="primary" plain>返回</el-button>

                    </el-form>
                </el-scrollbar>
            </div>
        </el-dialog>

        <!--转部门-->
        <el-dialog width="650px" center :close-on-click-modal=false style="text-align: left" title="转部门" :visible.sync="editempdeptshow">
            <div style="height:330px;" class="scrollbar">
                <el-scrollbar style="height:100%">
                    <el-form :model="myempdepfrom" label-position="top" label-width="80px">
                        <el-row>
                            <el-col :span="13">
                                <el-form-item
                                        label="所在部门">
                                    <el-input style="width: 215px; text-overflow:ellipsis"
                                              :disabled="true" v-model="myempdepfrom.olddept"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="调拨部门">
                                    <el-cascader style="width:215px"
                                         :props="defaultParams"
                                         @change="myempdepchange"
                                         v-model="myempdepfrom.newdept"
                                         :options="myempdepoptions">
                                    </el-cascader>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="13">
                                <el-form-item
                                    label="所在岗位">
                                    <el-input style="width: 215px"
                                              :disabled="true" v-model="myempdepfrom.oldrole"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item
                                        label="调拨岗位">
                                    <el-select style="width:215px"
                                               v-model="myempdepfrom.newrole" value-key="roleId" clearable placeholder="请选择">
                                        <el-option
                                                v-for="item in rolearrsoptions"
                                                :key="item.roleId"
                                                :label="item.roleName"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                            </el-col>
                        </el-row>
                        <el-button @click="savemyempdep()" style="margin-left: 230px;margin-top: 20px" size="small" type="primary" plain>保存</el-button>
                        <el-button style="margin-left: 10px;margin-top: 20px" size="small" type="primary" plain>返回</el-button>

                    </el-form>
                </el-scrollbar>
            </div>
        </el-dialog>



    </div>


</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    import cities from '../router/cities.js'
    export default {
        name: "Djurisdiction",
        inject: ['reload'], // 引入方法
        data() {
            var checkDept = (rule, value, callback) => {
                if (value.depId === 0 || value.depId===null) {
                    callback(new Error('请选择部门'));
                } else {
                    callback();
                }
            };
            var checkRole = (rule, value, callback) => {
                if (value.roleId === 0 || value.roleId===null) {
                    callback(new Error('请选择岗位'));
                } else {
                    callback();
                }
            };
            return {


                fullscreenLoading: false,//修改密码后页面加载重置

                myempdepfrom:{
                    olddept:'',
                    oldrole:'',
                    newdept:'',
                    newrole:'',
                },//转部门表单


                editempdeptshow:false,//员工转部门
                allselect:false,//是否全部选中

                myliro:{
                    liId:0,
                    liName:''
                },//数据权限选择

                myercheckedarr:[],//我的二级菜单数组

                rolestate:false,
                pageSize:8,//页大小
                pageTotal:0,//内容总条数
                pageNum: 1,//当前页
                myservice:true,//是否启用

                emprules:{
                    empName: [
                        { required: true, message: '请输入员工名称', trigger: 'blur' }
                    ],
                    depId: [
                        { required: true, message: '请选择部门', trigger: 'change' },
                        {validator: checkDept}
                    ],
                    roleId: [
                        { required: true, message: '请选择岗位', trigger: 'change' },
                        {validator: checkRole}
                    ],
                    empGender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    empPhone: [
                        { required: true, message: '请输入电话号码', trigger: 'blur' },
                        {pattern: /^1[3456789]\d{9}$/,message: '联系电话号码格式错误！'}
                    ],
                    empSfz: [
                        { required: true, message: '请输入身份证', trigger: 'blur' },
                        {pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式不正确!' }
                    ],
                    empAdd: [
                        { required: true, message: '请选择所住地址', trigger: 'blur' },
                    ],
                    empDeadd: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' },
                    ],

                },//竞争对手表单验证

                rolearrsoptions:[],//岗位数组
                address:[],//地址数组
                myempdepoptions:[],//部门联级选择器
                depvalues:[],
                defaultParams:{
                    value:'value',
                    label:'label',
                    depUpid:'depUpid',
                    children:'children'
                },

                empfrom:{
                    empId:0,
                    empName:'',
                    empGender:'',
                    empPhone:'',
                    empAdd:'',
                    empAddnum:'',
                    empDeadd:'',
                    empSfz:'',
                    empService:'启用',
                    depId:{
                        depId:0,
                        depName:'',
                    },
                    empDepnum:'',
                    roleId:{
                        roleId:0,
                        roleName:''
                    }
                },//员工表单

                options: cities,
                sex:'',
                addempshow:false,//新建员工弹框
                myempnameinput:'',//员工名称/岗位名称搜索
                myrolenameinput:'',//岗位结构名称搜索
                myrolename:'所有',//选中的角色名
                myempstatu:false,//是否查询离职的
                myempservice:false,//是否查询停用的
                emptabledata:[],//员工表格
                savemyroleId:'',//保存点击的角色ID
                savemyempId:'',//保存搜索的员工ID

                rolenameinput:'',//岗位名称搜索
                depnameinput:'',//部门名称搜索

                roleflag:false,


                depIdsoptions:[],
                rolesoptions:[],//上级岗位
                addrolesshow:false,//岗位弹框设置
                myrolefrom:{
                    roleUpid:0,//上级岗位
                    roleName:'',//岗位名称
                    roleRemark:'',//岗位描述
                    depId:{
                        depId:0,
                        depName:''
                    }
                },//岗位表单

                listroles:[],//列表权限
                myroleId:0,//保存我的职位ID
                checkAll:false,//全选职位权限
                isIndeterminate:false,//全选职位权限
                myactiveName:'',//岗位标签页
                myselectallroles:[],//查询出该岗位已有的权限组
                mycheckedarr:[],//我选择的权限
                stationJurisdiction:false,//岗位授权

                mydepfrom:{
                    depId:0,
                    depName:'',
                    upDep:{
                        depId:0,
                        depName:'',
                    },
                    depRemark:'',
                },//部门表单

                ismydepId:0,//保存需要授权部门的ID
                JurisdictionGroup:[],//部门所有权限组
                myroledata:[],//所有岗位管理
                deptJurisdiction:false,
                checkedGroup:[],//部门已有权限
                depoptions:[],//上级部门
                adddetshow:false,
                activeName: 'first',
                mydepdata: [],//所有部门管理

            };
        },

        methods: {

            savemyempdep(){
                var a = this.myempdepfrom.newdept
                a.forEach(v=>{
                    this.empfrom.empDepnum = this.empfrom.empDepnum + v +"/";//将部门数组存起来方便修改
                    this.empfrom.depId.depId = a[a.length-1];//将部门id存起来
                })
                let index  = this.empfrom.empDepnum.lastIndexOf("/");//去掉最后一个/
                this.empfrom.empDepnum =this.empfrom.empDepnum.substring(0,index);
                this.empfrom.roleId.roleId=this.myempdepfrom.newrole.roleId//角色ID

                var empfrom = JSON.stringify({empfrom:this.empfrom});
                this.myadd(empfrom);
                this.myempdepfrom={
                    olddept:'',
                    oldrole:'',
                    newdept:'',
                    newrole:'',
                }
                this.editempdeptshow=false;
            },

            editempdept(item){
                this.print(item);

                this.empfrom= JSON.parse(JSON.stringify(item));
                this.$axios.post("http://localhost:8088/myjurisdiction/selectdepbydeparr",this.qs.stringify(
                    {deparr:item.empDepnum}
                )).then(v=> {

                    this.myempdepfrom.olddept = v.data;
                })
                this.editempdeptshow = true;
                this.myempdepfrom.oldrole = item.roleId.roleName;
            },

            /*修改员工*/
            editemp(item){
                this.print(item);
                var a = JSON.stringify(item);
                this.empfrom = JSON.parse(a);

                var strings = JSON.parse(a).empAddnum.split("/");//地址
                strings.forEach(s=>{
                    this.address.push(s)
                })
                this.addempshow=true;
            },

            /*新增员工弹框前方法*/
            emphandleDialogClose(){
                this.addempshow=false;
                this.empfrom={
                    empId:0,
                    empName:'',
                    empGender:'',
                    empPhone:'',
                    empAdd:'',
                    empAddnum:'',
                    empDeadd:'',
                    empSfz:'',
                    empService:'启用',
                    depId:{
                        depId:0,
                        depName:'',
                    },
                    empDepnum:'',
                    roleId:{
                        roleId:0,
                        roleName:''
                    }
                };//员工表单
                this.depvalues = [];
            },

            /*权限全部选择方法*/
            allselectmethed(){
                this.allselect = !this.allselect;
                this.mycheckedarr = [];
                this.myercheckedarr = [];
                if(this.allselect){
                    this.myselectallroles.forEach(k=>{
                        k.wlist.forEach(j=>{
                            this.myercheckedarr.push(j)//添加二级菜单
                            this.mycheckedarr.push(j)//添加二级菜单
                            j.tlist.forEach(h=>{
                                this.mycheckedarr.push(h)//添加按钮菜单
                            })
                        })
                    })
                }
            },

            /*查询所有员工*/
            selectmyAllEmp(){
                this.myrolename = '所有';
                this.savemyroleId = '';
                this.savemyempId = '';
                this.myempnameinput = '';
                this.selectAllEmp();
            },
        //前端分页
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.pageNum = currentPage;
                console.log(this.pageNum)  //点击第几页
            },
            /*员工是否启用*/
            mychangeservice(){
                this.print(this.myservice);
                if(this.myservice){
                    this.empfrom.empService = "启用";
                }else{
                    this.empfrom.empService = "停用";
                }
            },

            /*确认新增员工*/
            savemynewemp(viod){
                this.$refs[viod].validate((valid) => {
                    this.print(this.empfrom);
                    if(valid){
                        var empfrom = JSON.stringify({empfrom:this.empfrom});
                        this.myadd(empfrom);
                    }else {
                        return false;
                    }
                })
            },

            myadd(empfrom){
                this.$axios.post("http://localhost:8088/myemp/addmyempfrom",this.qs.stringify(
                    {empfrom:empfrom}
                )).then(v=> {
                    if(v.data=='name'){
                        this.$message({
                            type: 'warning',
                            message: '该员工姓名已存在!'
                        });
                    }else{
                        this.selectAllEmp();
                        if(this.empfrom.empId!=0){
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }else{
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            });
                        }

                        this.addempshow=false;
                        this.empfrom={
                            empId:0,
                            empName:'',
                            empGender:'',
                            empPhone:'',
                            empAdd:'',
                            empAddnum:'',
                            empDeadd:'',
                            empSfz:'',
                            empService:'启用',
                            depId:{
                                depId:0,
                                depName:'',
                            },
                            empDepnum:'',
                            roleId:{
                                roleId:0,
                                roleName:''
                            }
                        };//员工表单
                        this.depvalues = [];
                    }
                })
            },

            /*新建员工选择部门*/
            myempdepchange(e){
                e.forEach(v=>{
                    this.empfrom.empDepnum = this.empfrom.empDepnum + v +"/";//将部门数组存起来方便修改
                    this.empfrom.depId.depId = e[e.length-1];//将部门id存起来
                })
                let index  = this.empfrom.empDepnum.lastIndexOf("/");//去掉最后一个/
                this.empfrom.empDepnum =this.empfrom.empDepnum.substring(0,index);

                this.selectrolelist(this.empfrom.depId.depId);
            },
            selectrolelist(value){
                /*查询该部门的剩余岗位*/
                this.$axios.post("http://localhost:8088/roles/rolearrByDepId",
                    this.qs.stringify(
                        {depId:value}
                    )).
                then(v=> {
                    this.rolearrsoptions = v.data;
                })
            },

            /*点开新增员工弹框*/
            addempshowview(){
                this.addempshow=true
            },

            /*当角色结构点击时*/
            myrolechangetime(item){
                this.savemyroleId = item.value;//保存我选择的角色ID
                this.myrolename = item.label;//保存我选择的角色名称
                this.selectAllEmp();
            },

            /*二级菜单复选框改变事件*/
            myerchangerole(item){
                this.print(this.myercheckedarr);
                var flga = false;
                this.myercheckedarr.forEach(v=>{//判断是选中还是取消选中
                    if(v==item){
                        flga = true;
                    }
                })
                if(!flga){//如果二级菜单权限中没有
                    item.tlist.forEach(r=>{//则循环它的子级和子级菜单v-model如果存在则移出
                        this.mycheckedarr.forEach((t,ind)=>{
                            var idx = ind;
                            if(t.tid==r.tid){
                                this.mycheckedarr.splice(idx,1);
                            }
                        })
                    })
                }

                this.mycheckedarr.forEach((t,ind)=>{//再一次循环去除父级id
                    if(item.wid == t.tid){
                        this.mycheckedarr.splice(ind,1);
                        return;
                    }
                })

            },

            /*三级按钮菜单复选框改变事件*/
            mychangerole(item){
                var flga =false;
                this.myercheckedarr.forEach(v=>{
                    if(v==item){
                        flga = true;
                        return;
                    }
                })
                if(!flga){//如果二级菜单数组没有该上级菜单则选中
                    this.myercheckedarr.push(item);
                }
            },

            /*关闭岗位弹框*/
            roleshandleDialogClose(){
                this.reload(); // 调用方法
            },

            /*是否可以删除岗位*/
            detrole(roleId){
                this.$axios.post("http://localhost:8088/roles/myisnomyroles",this.qs.stringify(
                    {roleId:roleId}
                )).then(v=> {
                    if(v.data==0){
                        this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '该岗位已有员工!'
                        });
                    }
                }).catch(()=>{

                });
            },

            /*新建岗位*/
            savemynewroles(){
                this.print(this.myrolefrom)
                this.$axios.post("http://localhost:8088/roles/savemynewroles",this.myrolefrom).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });

                    this.addrolesshow=false;
                    this.myrolefrom={
                        roleUpid:0,//上级岗位
                        roleName:'',//岗位名称
                        roleRemark:'',//岗位描述
                    };//岗位表单
                    this.initmyalldep();
                }).catch(()=>{

                })

            },

            /*打开新建岗位弹框*/
            addrole(item){
                var my = {
                    roleId:0,
                    roleName:''
                }
                my.roleId =item.value;
                my.roleName = item.label;
                this.rolesoptions[0] = my;
                this.myrolefrom.roleUpid = item.value;
                this.depIdsoptions[0] = item.depId;
                this.myrolefrom.depId = item.depId;
                this.addrolesshow = true;
            },

            /*判断我已拥有的权限数组*/
            myval(mycheckedarr,myroleName,myroleId){//之所以判断两层是因为用的
                // indexOf方法字符串假如一个id为1一个为11，它也会选中
                if(JSON.stringify(mycheckedarr).indexOf(myroleId)!=-1){//先判断是否有id
                    return JSON.stringify(mycheckedarr).indexOf('"'+myroleName+'"')!=-1//假如有再进行权限名称的判断
                }else{//没有直接返回false
                    return JSON.stringify(mycheckedarr).indexOf(myroleId)!=-1
                }
            },


            //ES5原生去重办法(权限数组去重)
             Es5duplicate(arr,type,type2){
                var newArr = [];
                var tArr = [];
                if(arr.length == 0){
                    return arr;
                }else{
                    if(type){
                        for(var i = 0; i < arr.length;i++){
                            if(!tArr[arr[i][type]]){//判断tid(第三层按钮菜单是否存在)
                                newArr.push(arr[i]);
                                tArr[arr[i][type]] = true;
                            }else if(!tArr[arr[i][type2]]){//判断wid是否存在
                                newArr.push(arr[i]);
                                tArr[arr[i][type2]] = true;
                            }
                        }
                        return newArr;
                    }else{
                        for(var j = 0; j < arr.length;j++){
                            if(!tArr[arr[j]]){
                                newArr.push(arr[j]);
                                tArr[arr[j]] = true;
                            }
                        }
                        return newArr;
                    }
                }
            },

            /*判断权限名是否包含列表两个字*/
            //Es6之字符串处理
            myyanz(a){
                return a.includes('列表');
            },

            handleCheckAllChange(val) {
                this.mycheckedarr = val ? this.myselectallroles : [];
                this.isIndeterminate = false;
            },

            /*岗位授权*/
            savemyroles(){


                this.mycheckedarr.forEach(p=>{
                    p.liro = this.myliro;
                })

                this.print(this.mycheckedarr);
                this.myercheckedarr.forEach(k=>{
                    this.mycheckedarr.push(k);
                })//将二级菜单v-model添加进三级菜单（按钮菜单）v-model中

                this.mycheckedarr = this.Es5duplicate(this.mycheckedarr,"tid","wid");
                var rolesarr = JSON.stringify({roleId:this.myroleId,mycheckedarr:this.mycheckedarr});
                this.$axios.post("http://localhost:8088/roles/saverolesarr",this.qs.stringify(
                    {rolesarr:rolesarr}
                )).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '授权成功!'
                    });
                    this.stationJurisdiction=false;//关闭岗位授权弹框
                    this.mycheckedarr = [];
                    var item = localStorage.getItem("roleId");//取当前登录人的角色ID
                    if(this.myroleId==item){//如果相等，授权后重新登录
                        this.fullscreenLoading = true;
                        setTimeout(() => {
                            this.fullscreenLoading = false;
                            this.$router.push({
                                path: "/login",
                            });
                        }, 3500);
                    }else{
                        this.reload(); // 调用方法
                    }
                })
            },

            /*查询该岗位的部门权限*/
            setstation(roleId){
                this.mycheckedarr = [];
                this.myroleId = roleId;
                this.$axios.post("http://localhost:8088/roles/selectmyroles",this.qs.stringify(
                    {roleId:roleId}
                )).then(v=>{
                    if(v.data.mydeproles==null){
                        this.$message({
                            type: 'warning',
                            message: '该岗位所属部门没有权限!'
                        });
                    }else{
                        /*该职位已有的权限*/
                        v.data.myallroles.forEach(k=>{
                            this.mycheckedarr.push(k);//查询出已有的权限并赋值
                        });
                        if(v.data.myallroles.length==0){
                            this.myliro ={
                                liId:3,
                                liName:'仅自己'
                            }
                        }else{
                            this.myliro = this.mycheckedarr[0].liro;//选中查看权限
                        }
                        this.myselectallroles = v.data.mydeproles;//该职位的部门权限

                        this.myactiveName =this.myselectallroles[0].menusName;
                        this.listroles= v.data.listroles;//列表权限
                        this.stationJurisdiction=true
                    }
                })
            },
            /*删除部门判断*/
            detdep(depId){
                this.print(depId);
                this.$axios.post("http://localhost:8088/myjurisdiction/verifyisempty",this.qs.stringify(
                    {depId:depId}
                )).then(v=> {
                    this.print(v.data);
                    if(v.data==0){
                        this.initmyalldep();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else if(v.data==1){
                        this.$message({
                            type: 'warning',
                            message: '请先删除下级部门!'
                        });
                    }else if(v.data==2){
                        this.$message({
                            type: 'warning',
                            message: '请先删除部门员工!'
                        });
                    }
                }).catch(()=>{

                })
            },

            /*确认添加部门*/
            savemydep(){
                this.print(this.mydepfrom);
                this.$axios.post("http://localhost:8088/myjurisdiction/savemydep",this.mydepfrom).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });

                    this.adddetshow=false;
                    this.initmyalldep();
                    this.mydepfrom={
                        depId:0,
                        depName:'',
                        upDep:{
                            depId:0,
                            depName:'',
                        },
                        depRemark:'',
                    };//部门表单
                }).catch(()=>{

                })
            },

            /*打开新建下级部门*/
            adddet(item){
                this.adddetshow=true;
                var my = {
                    depId:0,
                    depName:''
                }
                my.depId =item.value;
                my.depName = item.label;
                this.depoptions[0] = my;
                this.mydepfrom.upDep = my;
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },

            /*初始化数据*/
            async initmyalldep(){
                await this.$axios.post("http://localhost:8088/myjurisdiction/selectmyalldep").then(v=> {
                    if(v.data.mydepqx[0].label=='总公司'){
                        this.$set(v.data.mydepqx[0],'isshow',true);
                    }
                    this.forjudgedep(v.data.mydepqx[0].children);
                    this.mydepdata = v.data.mydepqx;
                    this.myempdepoptions = this.getTreeData(v.data.mydepqx);//部门级联选择器 部门树型


                    this.myroledata = v.data.myroleqx;//岗位树型


                    this.JurisdictionGroup = v.data.myallrole;//所有菜单权限
                }).catch(()=>{

                })
                await this.selectAllEmp();

                this.roleflag = true;
            },

            // 递归判断列表，把最后的children设为undefined
            getTreeData(data){
                // 循环遍历json数据
                for(var i=0;i<data.length;i++){
                    if(data[i].children.length===0){
                        // children若为空数组，则将children设为undefined
                        data[i].children=undefined;
                    }else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
                return data;
            },

            /*查询员工*/
            selectAllEmp(){
                this.$axios.post("http://localhost:8088/myemp/selectmyemp",this.qs.stringify(
                    {roleId:this.savemyroleId,empId:this.savemyempId,
                        myempnameinput:this.myempnameinput,
                        myempservice:this.myempservice,
                        myempstatu:this.myempstatu,
                    }
                )).then(v=> {
                    this.emptabledata = v.data;
                }).catch(()=>{

                })
            },

            /*循环判断是否有下级部门*/
            forjudgedep(item){
                item.forEach(k=>{
                    if(k.children.length>0){
                        this.$set(k,'isshow',false);
                        this.forjudgedep(k.children);
                    }else{
                        this.$set(k,'isshow',true);
                    }
                })

            },

            /*查询部门已有权限*/
            myselectdep(depId){
                this.ismydepId = depId;
                this.$axios.post("http://localhost:8088/myjurisdiction/mydepallmenus",this.qs.stringify(
                    {depId:depId}
                )).then(v=> {
                    v.data.forEach(v=>{
                        this.checkedGroup.push(v.menusId)
                    })
                    this.print(v.data);
                }).catch(()=>{

                })
            },
            /*给部门授权打开弹框*/
            mydepaccredit(depId){
                this.myselectdep(depId);
                this.deptJurisdiction=true;
            },

            /*确认部门授权*/
            saveDeptPer(){
                var mydepandmenus = JSON.stringify({depId:this.ismydepId,menuslist:this.checkedGroup});
                this.$axios.post("http://localhost:8088/myjurisdiction/savemydepmenus",this.qs.stringify(
                    {mydepandmenus:mydepandmenus}
                )).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '授权成功!'
                    });
                    this.deptJurisdiction=false;
                    this.checkedGroup = [];
                }).catch(()=>{

                })
            },
            //树状图
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },// 获取省市区地址级联
            handleChange(e, form, thsAreaCode) {
                thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
                window.console.log(thsAreaCode);// 注意3： 最终结果是个一维数组对象
                window.console.log(thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2]);
                const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes();
                window.console.log(checkedNodes[0].pathLabels); // 获取由 label 组成的数组
                //省市区赋值
                this.empfrom.empAdd = thsAreaCode[0] +'/'+ thsAreaCode[1] +'/'+ thsAreaCode[2];

                this.empfrom.empAddnum = e[0] +'/'+ e[1] +'/'+ e[2];

                this.address=e;
                window.console.log(typeof e);
                window.console.log(e);
                window.console.log("结果1"+e);
                window.console.log("结果2"+form);
                window.console.log("结果3"+thsAreaCode);
            }
        },
        created() {
            this.initmyalldep();
        },
        watch: {
            depnameinput(val) {
                this.$refs.deptree.filter(val);
            },
            rolenameinput(val) {
                this.$refs.roletree.filter(val);
            },
            myrolenameinput(val) {
                this.$refs.myroletree.filter(val);
            },

        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            },
        }

    }
</script>

<style scoped>
    .el-select>>>input{
        height: 35px;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 28px;
    }
    .myul{
        list-style: none;
        margin-top: 3px;
    }
    .myul li{
        margin-left: -39px;
        margin-top: 5px;
        width: 129px;
        text-align: center;
        height: 30px;
        line-height: 35px;
    }
    .myul li:hover{
        background-color: #BFBFBF;
        cursor: pointer;
    }
</style>